<template>
    <div class="test">
        <h3>试卷名称: <span>{{ detail.name }}</span></h3>
        <div class="tip">
            距离考试结束: <span>{{ time | formatime }}</span>
        </div>
        <div class="num">
            <p>【{{ index + 1 }}/ {{ data.length }}】</p>
        </div>

        <div class="content" v-if="data.length != 0">
            <h4>({{ index + 1 }}) {{ data[index].question }}</h4>
            <ul>
                <li v-for="(item, i) in data[index].option" @click="chooseTopic(i)" 
                    :class="item.isSelect == true ? 'active':''"
                    :key="i">
                    {{ item.key }}.{{ item.value }}
                </li>
            </ul>
        </div>


        <div class="control">
            <div class="box">
                <el-button type="primary" plain @click="prev">上一题</el-button>
                <el-button type="success" plain @click="next">下一题</el-button>
            </div>

            <div class="submit">
                <el-button type="danger" plain @click="submitTest">提交试卷</el-button>
            </div>
        </div>
    </div>
</template>

<script>
// 导入辅助函数
import { mapState } from 'vuex'
import  { getFn } from '../api/index'

export default {
    // 过滤器 
    filters: {
        formatime(value) {
            let h = 0;
            let m = 0;
            let s = 0;
            h = Math.floor(value / 3600);
            m = Math.floor(value % 3600 / 60);
            s = Math.floor(value % 60);
            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;
            return `${h}:${m}:${s}`;
        }
    },

    data() {
        return {
            detail: {},
            isOver: true,
            time: 0,
            data: [], 
            index: 0, 
            arr: [], 
            dingshiqi: null
        }
    },
    created() {
        let { eid } = this.$route.query;
        if (eid) {
            this.init(eid);
        }
    },

    computed: {
        ...mapState(['exam'])
    },

    methods: {
        
        async init(eid){
            await new Promise((resolve)=>{
                this.$store.dispatch('exam/addExaminationFn');
                resolve();
            })

            await getFn(`/api/exam/topic_list`,{eid:eid})
            .then(
                content=>{
                    let {code, result}= content;
                    if(code == 200){
                        setTimeout(()=>{
                            let arr = this.exam.examination.filter(item =>item.eid == eid);
                            this.detail = arr[0];
                            this.time = arr[0].time;
                            this.downTime();
                        },150)
                        this.detail = result[0];
                        let newArr = result.map(item=>{
                            item.option = JSON.parse(item.opt);
                            return item;
                        })
                        this.data = newArr;
                    }
                }
            )
        },

        chooseTopic(i) {
   
            let option = this.data[this.index].option;

            for (let j = 0; j < option.length; j++) {
                option[j].isSelect = undefined;
            }
        
            option[i].isSelect = true;

            this.data[this.index].option = option;

            this.arr[this.index] =  option[i].key;
            console.log( this.arr );
        },

        downTime() {
            if (this.time) {
                this.time--;
                this.dingshiqi = setInterval(() => {
                    this.time--;
                    if (this.time <= 0) {
                        clearInterval(this.dingshiqi);
                        alert("考试结束~~");
                        return false;
                    }
                }, 1000)
            }
        },

   
        submitTest() {
            this.$alert('您确定要提交试卷吗?', '温馨提示', {
                confirmButtonText: '确定',
                callback: () => {
                    console.log("是的，确定提交");// 在这里做提交试卷的逻辑
                    this.countScore();
                }
            })
        },

        // 上一题
        prev() {
            let index = this.index;
            index--;
            if (index < 0) {
                this.index = 0
            }
            else {
                this.index = index;
            }
        },

        // 下一题
        next() {
            let index = this.index;
            index++;
            if (index > this.data.length - 1) {
                this.index = this.data.length - 1
            }
            else {
                this.index = index;
            }
        },

        // 统计分数
        countScore(){
            //  
            if(this.arr.length != this.data.length) {
                alert("您还没完全作答~~")
                return false;
            }
            let score = 0;
            let right = 0;
            let wrong = 0;
            let time = this.detail.time;
            let name = this.detail.name;
            let second = this.detail.time - this.time;//用户花了多少时间考试
            for(let i = 0 ; i < this.data.length ; i ++){
                    if(this.data[i].answer == this.arr[i]) {
                        
                        score += this.data[i].score;
                        right +=1;
                    }
                    else {
                        wrong +=1; 
                    }
                }
            // 携带考试结果跳转页面
            this.$router.replace({ path: '/result' , query: {score ,right,wrong,second,time,name }})
        }
    }
}

</script>

<style lang="less">
@import '../common/less/varible.less';

.test {
    padding: @pad;

    h3 {
        font-size: 18px;
        height: 50px;
        line-height: 50px;
        border-bottom: 3px solid #000;
    }

    .tip {
        font-size: 17px;
        padding: 10px 0px;
    }

    .num {
        font-size: 17px;
        text-align: right;
    }

    .content {
        h4 {
            font-size: 17px;
        }

        ul {
            margin-top: 15px;

            li {
                font-size: 17px;
                padding: 12px 10px;
                margin-bottom: 10px;
                border-radius: 5px;
            }

            .active {
                background-color: @bgColor;
                color: #fff;
            }
        }
    }

    .control {
        padding: @pad;
        position: fixed;
        bottom: 20px;
        left: 0;
        z-index: 100;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
}

.el-message-box {
    width: 90%;
}

.el-message-box__btns {
    .el-button--primary {
        background-color: @bgColor;
        color: #fff;
        border-color: @bgColor;
    }
}
</style>
